<template>
  <div class="storage-device">
    <NavItem :p-style="{ textAlign: 'left' }">
      <template #title>
        存储设备
      </template>
    </NavItem>
    <div class="storage-left">

      <div ref="storageRef" class="chart-container1"></div>
    </div>
    <div class="storage-right">
      <div class="small-container">
        <div class="operate-models">
          <div ref="operateModelRef" class="chart-container2">
          </div>

        </div>
        <div class="storage-models">
          <div ref="storageModelRef" class="chart-container3"></div>
        </div>
        <div class="line-chart">

        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
//导入公共组件
import NavItem from '@/components/NavItem.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

// 图表引用
const storageRef = ref(null);
const operateModelRef = ref(null);
const storageModelRef = ref(null);

// 图表实例
let storageChart = null;
let operateModelChart = null;
let storageModelChart = null;

// 初始化图表函数
const initChart = (chartRef, option) => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    chart.setOption(option);
    return chart;
  }
  return null;
};

// 响应式调整
const handleResize = () => {
  storageChart?.resize();
  operateModelChart?.resize();
  storageModelChart?.resize();
};

onMounted(() => {
  // 存储图表配置
  const storageOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',      // 垂直排列
      left: 0,              // 距离右侧10px
      top: 'center',          // 垂直居中
      itemGap: 15,            // 图例项间隔
      textStyle: {
        color: '#666',        // 文字颜色
        fontSize: 12
      },
      icon: 'circle',
    },
    graphic: [{
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '存储\n49.82%',
        textAlign: 'center',
        // fill: '#fff',
        fontSize: 14,
        fontWeight: 'bold',

      }
    }],
    series: [
      {
        name: '存储分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 35, name: '数字法庭' },
          { value: 8, name: '卷宗' },
          { value: 5, name: '档案' },
          { value: 8, name: '其他' },
          { value: 44, name: '剩余' }
        ]
      }
    ]
  };

  // 处理器图表配置
  const operateOption = {
    tooltip: {
      trigger: 'item'
    },

    graphic: [{
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '利用率\n64%',
        textAlign: 'center',
        // fill: '#fff',
        fontSize: 10,
        fontWeight: 'bold',

      }
    }],
    series: [
      {
        name: '处理器',
        type: 'pie',
        radius: ['55%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 50, name: '核心业务' },
          { value: 25, name: '数据分析' },
          { value: 15, name: '后台服务' },
          { value: 10, name: '其他' }
        ]
      }
    ]
  };

  // 内存图表配置
  const storageModelOption = {
    tooltip: {
      trigger: 'item'
    },
    graphic: [{
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: '利用率\n49%',
        textAlign: 'center',
        // fill: '#fff',
        fontSize: 10,
        fontWeight: 'bold',

      }
    }],

    series: [
      {
        name: '内存分布',
        type: 'pie',
        radius: ['55%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 50, name: '应用内存' },
          { value: 50, name: '系统缓存' },

        ]
      }
    ]
  };

  // 初始化所有图表
  storageChart = initChart(storageRef, storageOption);
  operateModelChart = initChart(operateModelRef, operateOption);
  storageModelChart = initChart(storageModelRef, storageModelOption);

  // 添加窗口resize监听
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  // 移除resize监听
  window.removeEventListener('resize', handleResize);

  // 销毁图表实例
  storageChart?.dispose();
  operateModelChart?.dispose();
  storageModelChart?.dispose();
});
</script>

<style scoped lang="scss">
.storage-device {
  display: flex;
  width: 100%;
  height: 400px;
}

.storage-left {
  flex: 5;
  flex-direction: column;

  .chart-container1 {
    width: 100%;
    height: 100%;
    min-height: 150px;
    /* margin-left: -200px;
    margin-top: -80px; */
  }
}

.storage-right {
  flex: 5;
  flex-direction: column;

  .chart-container2 {
    width: 100%;
    height: 100%;
    min-height: 100px;
  }

  .chart-container3 {
    width: 100%;
    height: 100%;
    min-height: 100px;
  }

  .small-container {
    display: flex;

    .operate-models {
      flex: 5;
      /* padding: 10px; */

    }

    .storage-models {
      flex: 5;
      /* padding: 10px; */
    }

    .sline-chart {
      flex: 5;
      flex-direction: column;
    }
  }
}
</style>
